<template>
  <div class="my">
    <van-nav-bar title="我的" left-arrow @click-left="onClickLeft" />
    <div class="message">
      <div class="avatar">
        <img :src="user[0].avatar" />
      </div>
      <!-- 用户信息 -->
      <div class="text" @click="goPage('Info')">
        <div class="name">{{ user[0].username }}</div>
        <div class="phone">
          <van-icon name="phone-o" />
          <span class="myPhone">{{
            user[0].is_mobile_valid ? "暂无绑定手机号" : user[0].mobile
          }}</span>
        </div>
      </div>
      <div class="icon">
        <van-icon name="arrow" color="#ffffff" size="20px" />
      </div>
    </div>
    <div class="info-data">
      <ul>
        <li class="myBalance">
          <div class="tc"><span class="money">0.00</span>元</div>
          <div class="tx">我的余额</div>
        </li>
        <li class="myPreferential">
          <div class="tc"><span class="Preferential">3</span>个</div>
          <div class="tx">我的优惠</div>
        </li>
        <li class="myIntegral">
          <div class="tc"><span class="Integral">0</span>分</div>
          <div class="tx">我的积分</div>
        </li>
      </ul>
    </div>
    <div class="profile-1reTe">
      <div class="myOrders" @click="goPage('Orders')">
        <div class="left" >
          <van-icon name="orders-o" />
          <span>我的订单</span>
        </div>
        <div class="right">
          <van-icon name="arrow" color="#333333" />
        </div>
      </div>
      <div class="membership">
        <div class="left">
          <van-icon name="vip-card" color="#FFC636" />
          <span>会员卡</span>
        </div>
        <div class="right">
          <van-icon name="arrow" color="#333333" />
        </div>
      </div>
      <div class="service-center">
        <div class="left">
          <van-icon name="service" />
          <span>服务中心</span>
        </div>
        <div class="right">
          <van-icon name="arrow" color="#333333" />
        </div>
      </div>
    </div>
    <div class="denglu" @click="quitLogin">退出登录</div>
  </div>
</template>

<script lang="ts">
import { defineComponent, ref, onMounted } from "vue";

import { useRouter } from "vue-router";
import { showToast } from "vant";

import axios from "axios";

export default defineComponent({
  name: "My",
  setup() {
    const onClickLeft = () => history.back();

    let user: any = ref<Array<any>>([
      {
        username: "cidada",
        user_id: 76942,
        id: 76942,
        registr: "2023-05-09 18:46",
        mobile: "",
        is_mobile_valid: true,
        is_email_valid: false,
        is_active: 1,
        gift_amount: 3,
        avatar: "https://elm.cangdu.org/img/default.jpg",
      },
    ]);

    let router: any = useRouter();
    //退出登录
    let quitLogin: () => void = (): void => {
      sessionStorage.clear();
      showToast("退出成功");
      setTimeout(() => {
        router.push({
          name: "Login",
        });
      }, 1000);
    };

    //跳转新增地址 页面
    let goPage: (name: string) => void = (name:  string): void => {
            router.push({
                name,
            });  
        }

    return {
      //数据
      user,

      //方法
      onClickLeft,
      quitLogin,
      goPage
    };
  },
});
</script>

<style lang="scss" scoped>
.my {
  background-color: #f5f5f5;
  height: 619px;
  .denglu {
    width: 140px;
    height: 30px;
    background-color: #3190e8;
    margin: 20px auto;
    text-align: center;
    line-height: 30px;
    color: #ffffff;
  }
  ::v-deep .van-nav-bar__content {
    background-color: #3190e8;
  }
  ::v-deep .van-nav-bar__title {
    color: #ffffff;
    font-size: 20px;
  }
  ::v-deep .van-nav-bar .van-icon {
    color: #ffffff;
    font-size: 22px;
  }
  ::v-deep .van-hairline--bottom::after {
    border-bottom-width: 0;
  }
  .message {
    height: 89px;
    // width: 360px;
    background-color: #3190e8;
    display: flex;
    align-items: center;
    .avatar {
      width: 59px;
      height: 59px;
      margin-left: 10px;
      border-radius: 59px;
      img {
        width: 100%;
        border-radius: 59px;
      }
    }
    .text {
      width: 250px;
      .name {
        font-weight: bold;
        margin-bottom: 5px;
        // margin-left: 15px;
      }
      margin-left: 10px;
      font-size: 16px;
      color: #ffffff;
      .myPhone {
        font-size: 14px;
      }
    }
  }
  .info-data {
    height: 85px;
    background-color: #ffffff;
    ul {
      display: flex;
      li {
        width: 125px;
        height: 85px;
        text-align: center;
        font-size: 14px;
        .tc {
          color: #333333;
          margin-top: 20px;
          .money {
            font-size: 28px;
            font-weight: 700;
            color: #ff9900;
          }
          .Preferential {
            font-size: 28px;
            font-weight: 700;
            color: #ff5f3e;
          }
          .Integral {
            font-size: 28px;
            font-weight: 700;
            color: #6ac20b;
          }
        }
        .tx {
          color: #999999;
          margin-top: 5px;
        }
      }
      .myPreferential {
        border-left: 1px solid #ccc;
        border-right: 1px solid #ccc;
      }
    }
  }
  .profile-1reTe {
    height: 126px;
    margin-top: 10px;
    background-color: #ffffff;
    .left {
      font-size: 18px;
      margin-left: 15px;
      span {
        margin-left: 5px;
      }
    }
    .right {
      font-size: 16px;
      margin-right: 5px;
    }
    .myOrders {
      display: flex;
      align-items: center;
      justify-content: space-between;
      height: 42px;
    }
    .membership {
      display: flex;
      align-items: center;
      justify-content: space-between;
      height: 42px;
    }
    .service-center {
      display: flex;
      align-items: center;
      justify-content: space-between;
      height: 42px;
    }
  }
}
</style>